<template>
  <div class="final-test">
    <h2>最终测试 - 利用率分布图</h2>
    
    <div class="test-controls">
      <el-radio-group v-model="viewType" @change="handleViewChange">
        <el-radio-button label="geographic">地理分布</el-radio-button>
        <el-radio-button label="utilization">利用率分布</el-radio-button>
      </el-radio-group>
    </div>
    
    <div class="test-container">
      <!-- 高德地图容器 -->
      <div ref="amapContainer" class="map-container" v-show="viewType === 'geographic'">
        <div class="placeholder">高德地图区域（暂未实现）</div>
      </div>
      
      <!-- ECharts利用率分布图 -->
      <div ref="mapChart" class="map-container" v-show="viewType === 'utilization'"></div>
    </div>
    
    <div class="test-info">
      <h4>测试状态: {{ status }}</h4>
      <div class="debug-log">
        <h5>调试日志:</h5>
        <div v-for="(log, index) in debugLogs" :key="index" class="log-item">
          {{ log }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FinalTest',
  data() {
    return {
      viewType: 'utilization',
      mapChart: null,
      status: '初始化中...',
      debugLogs: [],
      regionData: {
        '北京': { utilization: 76, color: '#e6a23c', warehouseCount: 2 },
        '上海': { utilization: 85, color: '#e6a23c', warehouseCount: 3 },
        '广东': { utilization: 90, color: '#f56c6c', warehouseCount: 6 },
        '江苏': { utilization: 82, color: '#e6a23c', warehouseCount: 4 },
        '浙江': { utilization: 73, color: '#e6a23c', warehouseCount: 3 },
        '四川': { utilization: 68, color: '#67c23a', warehouseCount: 4 },
        '山东': { utilization: 75, color: '#e6a23c', warehouseCount: 3 },
        '河北': { utilization: 69, color: '#67c23a', warehouseCount: 2 },
        '湖北': { utilization: 79, color: '#e6a23c', warehouseCount: 4 },
        '辽宁': { utilization: 65, color: '#67c23a', warehouseCount: 3 }
      }
    }
  },

  async mounted() {
    this.addLog('组件挂载开始')
    await this.registerMap()
    this.initChart()
  },

  beforeUnmount() {
    if (this.mapChart) {
      this.mapChart.dispose()
    }
  },

  methods: {
    addLog(message) {
      this.debugLogs.push(`${new Date().toLocaleTimeString()}: ${message}`)
      console.log(message)
    },

    async registerMap() {
      this.addLog('开始注册地图数据')
      
      const mapData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: { name: '北京' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[115.5, 39.5], [117.5, 39.5], [117.5, 41.0], [115.5, 41.0], [115.5, 39.5]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '上海' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[120.8, 30.8], [122.2, 30.8], [122.2, 31.8], [120.8, 31.8], [120.8, 30.8]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '广东' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[109.5, 20.0], [117.5, 20.0], [117.5, 25.5], [109.5, 25.5], [109.5, 20.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '江苏' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[116.5, 30.5], [122.0, 30.5], [122.0, 35.5], [116.5, 35.5], [116.5, 30.5]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '浙江' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[118.0, 27.0], [123.0, 27.0], [123.0, 31.5], [118.0, 31.5], [118.0, 27.0]]]
            }
          }
        ]
      }
      
      try {
        echarts.registerMap('china', mapData)
        this.addLog('地图数据注册成功')
        this.status = '地图数据注册成功'
      } catch (error) {
        this.addLog(`地图注册失败: ${error.message}`)
        this.status = '地图注册失败'
      }
    },

    initChart() {
      this.addLog('开始初始化图表')
      
      if (!this.$refs.mapChart) {
        this.addLog('图表容器未找到')
        return
      }
      
      try {
        this.mapChart = echarts.init(this.$refs.mapChart)
        this.addLog('ECharts实例创建成功')
        this.updateChart()
        this.status = '图表初始化成功'
      } catch (error) {
        this.addLog(`图表初始化失败: ${error.message}`)
        this.status = '图表初始化失败'
      }
    },

    updateChart() {
      if (!this.mapChart) {
        this.addLog('图表实例不存在')
        return
      }
      
      this.addLog('开始更新图表数据')
      
      const option = {
        title: {
          text: '利用率分布测试',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const data = this.regionData[params.name]
            if (data) {
              return `
                ${params.name}<br/>
                利用率: ${data.utilization}%<br/>
                库房数量: ${data.warehouseCount}个
              `
            }
            return `${params.name}<br/>暂无数据`
          }
        },
        visualMap: {
          min: 60,
          max: 95,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          inRange: {
            color: ['#67c23a', '#e6a23c', '#f56c6c']
          }
        },
        series: [
          {
            name: '利用率',
            type: 'map',
            map: 'china',
            roam: true,
            data: Object.keys(this.regionData).map(region => ({
              name: region,
              value: this.regionData[region].utilization,
              itemStyle: {
                areaColor: this.regionData[region].color
              }
            }))
          }
        ]
      }
      
      try {
        this.mapChart.setOption(option)
        this.addLog('图表数据更新成功')
        this.status = '图表渲染成功'
      } catch (error) {
        this.addLog(`图表更新失败: ${error.message}`)
        this.status = '图表更新失败'
      }
    },

    handleViewChange(type) {
      this.addLog(`视图切换到: ${type}`)
      
      if (type === 'utilization') {
        this.$nextTick(() => {
          setTimeout(() => {
            if (!this.mapChart) {
              this.initChart()
            } else {
              this.mapChart.resize()
              this.updateChart()
            }
          }, 100)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.final-test {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
    color: #303133;
  }
  
  .test-controls {
    margin-bottom: 20px;
  }
  
  .test-container {
    position: relative;
    margin-bottom: 20px;
  }
  
  .map-container {
    width: 100%;
    height: 500px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    
    .placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #909399;
      font-size: 16px;
    }
  }
  
  .test-info {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    
    h4 {
      margin: 0 0 10px 0;
      color: #303133;
    }
    
    .debug-log {
      h5 {
        margin: 10px 0 5px 0;
        color: #606266;
      }
      
      .log-item {
        font-size: 12px;
        color: #909399;
        margin-bottom: 2px;
        font-family: monospace;
      }
    }
  }
}
</style>
